<template>
  <!-- 这里是首页，最好改造后再发布 -->
  <div class="home__content">
    <!-- 首页-头部信息 -->
    <header class="hero">
      <img :src="$withBase('/assets/img/xxx.jpg')" alt="hero" />
      <h1 id="main-title">
        长路漫漫，唯键作伴
      </h1>
      <p class="description">
        从此，浮生一阙，日暮天涯<br />
        铅华洗尽，宠辱不惊<br />
        看庭前花开花落，望天空云卷云舒
      </p>
      <p class="action">
        <a :href="$withBase('/quick')" class="nav-link action-button">
          打开新世界 →
        </a>
      </p>
    </header>
    <!-- 首页-flag -->
    <div class="features home-content__flag">
      <div class="feature">
        <h2><b>框架 or 库</b></h2>
        <p>
          <b>框架：</b>
          一堆代码，你的 <b><i>sao</i></b> 操作代码会被放入这堆代码里执行<br />
          <b>库：</b>
          一堆代码，你的代码只是调用了这堆代码提供的 <b><i>sao</i></b> 功能
        </p>
      </div>
      <div class="feature">
        <h2><b>高内聚低耦合</b></h2>
        <p>
          <b>聚合和解耦互为反义词</b></br>
          <b>高内聚：</b>将关联性强的功能聚合到组件或者库内部，提升复用性 </br>
          <b>低耦合：</b>将关联性不强的功能提取到组件或者库的外部。提升可维护性</br>
          <b>
            高的内聚会让解耦更方便！</br>
            低的耦合会让聚合更轻松！</br>
            二者相辅相成！
          </b>
        </p>
      </div>
      <div class="feature">
        <h2><b>谈闭包</b></h2>
        <p>
          <b>当你理解作用域以及垃圾回收机制后，你会发现，闭包是必然存在的</b></br>
          1、现存版本太多，但是大部分是在表层各抒己见。</br>
          2、如果深入js引擎执行机制，我们会知道连作用域都是一个规范类名词，闭包只是作用域搭配了垃圾回收机制的产物，so，必然也是一个规范类名词（一连串代码逻辑的代称）</br>
          3、<b>个人倾向的理解</b>：变量能访问并<b>记住</b>自己所在的作用域，保持住这个作用域链，那么这个现象统称闭包</br>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    handlePlayVideo() {

    },
  },
};
</script>

<style lang="scss" scoped>
// .home__content {
//   .home-content__flag {
//     span
//   }
// }
</style>
